<template>
  <KView class="back-top" :style="btnStyle">
    <KView class="back-top-item">
      <KButton class="back-top-btn" @click="remind">
        <img class="sys-img" :src="remindImg" mode="aspectFit">
      </KButton>
    </KView>
    <KView class="back-top-item">
      <KButton v-if="isMiniprogram" class="back-top-btn" open-type="share">
        <img class="sys-img" :src="shareImg" mode="aspectFit">
      </KButton>
      <KButton v-else class="back-top-btn" @click="toShare">
        <img class="sys-img" :src="shareImg" mode="aspectFit">
      </KButton>
    </KView>
    <KView class="back-top-item" v-if="hasTop">
      <KButton class="back-top-btn" @click="toTop">
        <img class="sys-img" :src="toTopImg" mode="aspectFit">
      </KButton>
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';
  import SystemUtil from 'utils/systemUtil';
  import WxWebUtil from 'utils/wxWebUtil';

  export default {
    props: {
      hasTop: {
        type: Boolean,
        default: true
      }
    },

    computed: {
      btnStyle() {
        let height = this.hasTop ? 302 : 193;
        return {
          height: SystemUtil.formatPx(height)
        };
      }
    },

    data() {
      const img = GlobalData.images.backTop;
      return {
        isMiniprogram: process.env.isMiniprogram,
        remindImg: img.remind,
        shareImg: img.share,
        toTopImg: img.toTop
      };
    },

    methods: {
      remind() {
        if (this.isMiniprogram) {
          window.open('/remindPage');
        }
      },

      toShare() {
        WxWebUtil.sharePage();
      },

      toTop() {
        this.$emit('to-top');
      }
    }
  };

</script>

<style lang="scss">
  .back-top {
    width: formatPx(84);

    .back-top-item {
      height: formatPx(84);
      margin-bottom: formatPx(25);

      &:last-child {
        margin-bottom: 0;
      }

      .back-top-btn {
        width: 100%;
        height: 100%;
        padding: 0;
        background: none;
        border: none;

        &:active {
          background: none;
        }
      }
    }
  }

</style>
